<template>
  <!-- 主体部分 -->
  <div class="main">
      <aside>
          <ul>
              <router-link to="/main/kaisuo">
                <li class="menu-item" :class="{select:$route.path == '/main/kaisuo'}">
                    <div class="iconfont icon-suoding"></div>
                    <div class="menu-name">开锁</div>
                </li>
              </router-link>
              <router-link to="/main/deviceInfo">
                  <li class="menu-item"  :class="{select:$route.path == '/main/deviceInfo'}">
                    <div class="iconfont icon-geren"></div>
                    <div class="menu-name">设备</div>
                </li>
              </router-link>
              <router-link to="/main/jiankong">
                  <li class="menu-item" :class="{select:$route.path == '/main/jiankong'}">
                    <div class="iconfont icon-rizhi"></div>
                    <div class="menu-name">日志</div>
                </li>
              </router-link>
              <router-link to="/main/realtime_camera">
                  <li class="menu-item" :class="{select:$route.path == '/main/realtime_camera'}">
                    <div class="iconfont icon-zhaoxiangji"></div>
                    <div class="menu-name">监控</div>
                </li>
              </router-link>
              <router-link to="/main/setting">
                  <li class="menu-item" :class="{select:$route.path == '/main/setting'}">
                    <div class="iconfont icon-shezhi"></div>
                    <div class="menu-name">设置</div>
                </li>
              </router-link>
              <router-link to="/main/bind">
                  <li class="menu-item" :class="{select:$route.path == '/main/bind'}">
                    <div class="iconfont icon-tianjia"></div>
                </li>
              </router-link>

          </ul>
      </aside>
      <div class="main-content">
        <router-view></router-view>
      </div>
  </div>
</template>
<script>
import "../iconfont/iconfont.css";
export default {};
</script>
<style lang="less">
ul,
li {
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
  aside {
    width: 69px;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    ul {
      a {
        li {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: #fff;
          margin-bottom: 8px;
          position: relative;
          list-style: none;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          .iconfont {
            font-size: 20px;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%, 0);
            color: #8dcae2;
          }
          .iconfont:last-child {
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          .menu-name {
            font-size: 12px;
            color: #8dcae2;
          }
        }
        .select {
          .iconfont {
            color: #ccc;
          }
          .menu-name {
            color: #ccc;
          }
        }
      }
      a:last-child {
        li {
          margin: 0;
        }
      }
    }
  }
  .main-content {
    width: 236px;
    height: 290px;
    border-radius: 10px;
    background-color: #ffffff;
    flex-grow: 1;
    margin-right: 15px;
    overflow: auto;
  }
}
</style>
